/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import { Navigation } from 'react-native-navigation'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import MyScreen from './src/app/my/My'
import TravelScreen from './src/app/travel/Travel'
import HomeScreen from './src/app/home/Home'
import MessageScreen from './src/app/message/Message'
import PublishModal from './src/app/travel/Publish'
import { HomeHeader } from './src/app/components/Header'

Navigation.registerComponent('letsGo.modal.PublishModal', () => PublishModal)
Navigation.registerComponent('letsGo.components.HomeHeader', () => HomeHeader)

// Screens in tabs
Navigation.registerComponent('letsGo.HomeScreen', () => HomeScreen)
Navigation.registerComponent('letsGo.MessageScreen', () => MessageScreen)
Navigation.registerComponent('letsGo.MyScreen', () => MyScreen)
Navigation.registerComponent('letsGo.TravelScreen', () => TravelScreen)

const iconConfig = {
  size: 24
}

const that = this
that.icons = {}

let iconPromises = [
  getIcon('home-outline'),
  getIcon('home'),
  getIcon('message-text'),
  getIcon('message-text-outline'),
  getIcon('calendar-text'),
  getIcon('account'),
  getIcon('account-outline')
]

function getIcon(name) {
  return Icon.getImageSource(name, iconConfig.size, iconConfig.color).then((source) => {
    that.icons[name] = source
  })
}

Promise.all(iconPromises).then(function() {
  // start the app
  Navigation.startTabBasedApp({
    appStyle: {
      statusBarTextColorScheme: 'light',
      navBarBackgroundColor: '#0099FF',
      navBarTextColor: '#FFFFFF'
    },
    tabsStyle: {
      tabBarSelectedButtonColor: '#0099FF',
      tabBarSelectedLabelColor: '#0099FF'
    },
    tabs: [
      {
        label: '主页',
        screen: 'letsGo.HomeScreen', // this is a registered name for a screen
        icon: that.icons['home-outline'],
        selectedIcon: that.icons['home'], // iOS only
        title: 'Home'
      },{
        label: '旅行',
        screen: 'letsGo.TravelScreen', // this is a registered name for a screen
        icon: that.icons['calendar-text'],
        selectedIcon: that.icons['calendar-text'], // iOS only
        title: 'Travel'
      },{
        label: '消息',
        screen: 'letsGo.MessageScreen', // this is a registered name for a screen
        icon: that.icons['message-text-outline'],
        selectedIcon: that.icons['message-text'], // iOS only
        title: 'Message'
      },{
        label: '我',
        screen: 'letsGo.MyScreen', // this is a registered name for a screen
        icon: that.icons['account-outline'],
        selectedIcon: that.icons['account'], // iOS only
        title: 'My',
        navigatorStyle: {
          navBarHidden: true
        }
      }
    ]
  })
})